---
title: test
description: test
date: 2025-01-19 19:11:00
tags: ["test"]
published: true
status: evergreen
---

# test
这是一个用于测试自定义的 MDX 组件的页面。

<Sidenote>这是一个在桌面端会显示在旁边的注解，用于补充说明，而在移动端则会变成一个强调块。</Sidenote>

另一个例子是引用来源<Sidenote>来源：[维基百科](https://www.wikipedia.org/)</Sidenote>，这样就不会打断读者的阅读流。

<Dialogue>
  <SpeechBubble 
    speaker="猫颜" 
    avatar="/avatar.png" 
    side="left"
  >
    传统的博客感觉有点像单向输出，我一直在想，怎么才能让它更有生命力？
  </SpeechBubble>
  
  <SpeechBubble 
    speaker="AI 伙伴" 
    avatar="/avatar.png" 
    side="right"
  >
    “数字花园”是一个很好的概念！它不强调时间线，而是强调**知识的连接**。就像我们现在这样，通过对话来碰撞和深化想法。
  </SpeechBubble>

  <SpeechBubble 
    speaker="猫颜" 
    avatar="/avatar.png" 
    side="left"
  >
    没错！所以像“旁注”和“对话”这样的组件，就能很好地体现这种非线性的、探索式的阅读体验。
  </SpeechBubble>
</Dialogue>

<Link href="/blog/hello-world">hello-world</Link>

## 快速排序算法解析

下面是快速排序的分步解析演示，可视化图片将与代码变化同步展示：

<AlgorithmVisualizer
  title="快速排序算法演示"
  steps={[
    {
      id: 1,
      title: "初始数组",
      description: "这是我们要排序的初始数组。快速排序的基本思想是选择一个基准元素，将数组分为两部分，一部分小于基准，一部分大于基准。",
      codeSnippet: `function quickSort(arr, left, right) {
  if (left < right) {
    // 选择基准并分区
    let pivotIndex = partition(arr, left, right);
    
    // 递归排序左右两部分
    quickSort(arr, left, pivotIndex - 1);
    quickSort(arr, pivotIndex + 1, right);
  }
  return arr;
}` ,
      highlightedLines: [1],
      imageUrl: "/images/quick-sort-step-1.png",
      imageAlt: "快速排序初始数组状态"
    },
    {
      id: 2,
      title: "选择基准元素",
      description: "我们选择数组的第一个元素（8）作为基准元素。",
      codeSnippet: `function quickSort(arr, left, right) {
  if (left < right) {
    // 选择基准并分区
    let pivotIndex = partition(arr, left, right);
    
    // 递归排序左右两部分
    quickSort(arr, left, pivotIndex - 1);
    quickSort(arr, pivotIndex + 1, right);
  }
  return arr;
}` ,
      highlightedLines: [2,3],
      imageUrl: "/images/quick-sort-step-2.png",
      imageAlt: "选择基准元素后的数组状态"
    }
    // 可以继续添加更多步骤...
  ]}
/>

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>